<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/html">

<head>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>聊天室</title>
    {include file='common/header'}
    <link href="/static/home/mobile/css/reset_5.css" rel="stylesheet" type="text/css"/>
    <link href="/static/home/mobile/css/style.css" rel="stylesheet" type="text/css"/>
    <link href="/static/home/mobile/css/new_style.css" rel="stylesheet" type="text/css"/>

  <style type="text/css">
  .white{background:#fff;}
        /** -- 文件上传样式 --**/
 .file-up {
    position: relative;
    display: inline-block;
    background:#fde03f;
    border: 1px solid #fde03f;
    border-radius: 4px;
    padding: 4px 12px;
    overflow: hidden;
    color:#834100;
    text-decoration: none;
    text-indent: 0;
    line-height: 20px;
   /*	height: 30px;*/
	min-width: 60px;
    font-size:12px;
   text-align: center;
}
.file-up input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
}
.file-up:hover {
    background: #AADFFD;
    border-color: #78C3F3;
    color: #004974;
    text-decoration: none;
}
     .file-up:link ,.file-up:visited{
        color:#834100;
      }

input:focus, textarea:focus {
    outline: none;
}



        .dialog {
          position: fixed;
          left: 0;
          top: 0;
          z-index: 10001;
          width: 100%;
          height: 100%;
        }
        .dialog-content {
            width: 70%;
        }
        .dialog-overlay {
          position: absolute;
          top: 0;
          left: 0;
          z-index: 10002;
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.5);
        }
        
  </style>
</head>
<body>
    <div class="site-header header-fixed">
        <a onclick="history.back()" class="back"></a>
        <div class="tit-name">
    			群聊
        	</div>
    </div>
    <br><br><br>
    <!--主题-->
    <div class="new-gold-detial">

</div>
<!--回复-->
    <div class="new-gold-detial" id="test2">
    <div class="update-box mx_list" id="table">

    <div class="update-box mx_list" id="tables" >
    {volist name="list" id='d'}
          {if condition="$current_user_id neq $d['uid']"}

       <div style="width:100%;margin-top: 30px;">
              <div style="float:left;width:20%;text-align: center;">
                      <img style="width:50px;height:50px;border-radius:50%;" src="{$d.avatar|default='http://qiniu.weizhongbang.net/cae77201908122223168354.png'}" alt="">
                      <div style="width:50px;text-align:center;width:100%;">{$d['uid']}</div>
             </div>

            <div style="width:50%;float:left;margin-top: 0px;padding:20px;border-radius: 10px;background: #fff;line-height:30px;">
            
                           {if condition="$d['img']"}
              <div style="width:100%;text-align:center;">

            <img src="{$d['img']}" style="height:100px;" >
              </div>
              {else/}

	              {$d['content']}
              {/if}
           </div>

            <div style="clear:both;"></div>
        </div>

         <div style="line-height:30px;color:#ccc;height:30px;text-align:center;width:100%;font-size:12px;">{$d.create_time}</div>

        {/if}

          {if condition="$current_user_id eq $d['uid']"}

       <div style="width:100%;margin-top: 30px;">
              <div style="float:right;width:20%;text-align: center;">
                      <img style="width:50px;height:50px;border-radius:50%;" src="{$d.avatar|default='http://qiniu.weizhongbang.net/cae77201908122223168354.png'}" alt="">
             </div>

            <div style="width:50%;float:right;margin-top: 20px;padding:20px;border-radius: 10px;background: #ffd93d;color:#5f4242;position:relative;line-height:30px;">
              {if condition="$d['img']"}
              <div style="width:100%;text-align:center;">

            <img src="{$d['img']}" style="height:100px;" >
              </div>
              {else/}

              {$d['content']}
              {/if}

           </div>


            <div style="clear:both;"></div>
        </div>
              <div style="line-height:30px;color:#ccc;height:30px;text-align:center;width:100%;font-size:12px;">{$d.create_time}</div>


          {/if}
          
          
          
          
{/volist}


</div>


    </div>
</div>

<div style="width:100%;background:#fff;height:60px;position:fixed;bottom:0;z-index:100;">
<div  style="width:10%;height:60px;line-height: 80px;margin-left:5%;float:left;">

<input type="file" id="upimg" style="width: 15%;height: 60px;z-index:100;position:absolute;top:0;left:0;opacity: 0; " class="file_up">

  <svg t="1566220056807" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2169" width="32" height="32"><path d="M942.08 286.72C917.048889 261.688889 887.466667 250.311111 853.333333 250.311111h-109.226666l-25.031111-65.991111c-6.826667-15.928889-18.204444-29.582222-34.133334-40.96s-34.133333-18.204444-50.062222-18.204444h-250.311111c-18.204444 0-34.133333 6.826667-50.062222 18.204444-15.928889 11.377778-27.306667 25.031111-34.133334 40.96L273.066667 250.311111H161.564444c-34.133333 0-63.715556 11.377778-88.746666 36.408889S36.408889 341.333333 36.408889 375.466667v439.182222c0 34.133333 11.377778 63.715556 36.408889 88.746667s54.613333 36.408889 88.746666 36.408888h691.768889c34.133333 0 63.715556-11.377778 88.746667-36.408888s36.408889-54.613333 36.408889-88.746667V375.466667c0-34.133333-11.377778-63.715556-36.408889-88.746667zM507.448889 794.168889c-113.777778 0-207.075556-93.297778-207.075556-207.075556s93.297778-207.075556 207.075556-207.075555 207.075556 93.297778 207.075555 207.075555-93.297778 207.075556-207.075555 207.075556z" fill="#486efc" p-id="2170"></path><path d="M507.448889 450.56c-77.368889 0-138.808889 61.44-138.808889 138.808889 0 77.368889 61.44 138.808889 138.808889 138.808889s138.808889-61.44 138.808889-138.808889c0-77.368889-61.44-138.808889-138.808889-138.808889z" fill="#486efc" p-id="2171"></path></svg>
</div>
  <div style="width:70%;float:left;">
    <textarea id="content" name="content"  style="width: 100%;height:55px;border:none;line-height:55px;" placeholder="输入消息"></textarea>
  </div>

  <div style="width:15%;float:right;text-align:center;line-height:80px;height:60px;" class="js-bind">
<svg t="1566220974711" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5606" width="32" height="32"><path d="M998.976 554.3232C1031.232 539.6032 1031.328 515.7952 998.976 501.0432L122.88 101.3312C90.624 86.6112 64.448 103.5072 64.384 138.4832L64 426.9952 773.568 527.6672 64 628.3392 64.384 916.8832C64.448 952.1152 90.528 968.7872 122.88 954.0352L998.976 554.3232Z" p-id="5607" fill="#486efc"></path></svg>
</div>

</div>

    <div class="main bindMail">
        <div class="member-form">
            <div class="item-box" style="height: auto;">

            </div>
        </div>


<div style="height:100%;width:100%;z-index: 1000;background: rgba(0,0,0,0.5);position: fixed;top:0;display: none;" id='imgDiv'>

  <img style="width:50%;margin-left: 25%;margin-top: 50%;" src="">

</div>


<form id="form1">
<!--   <div>
  <b style="font-size: 30px">图片：</b><a href="javascript:;" class="file-up">上传图片<input type="file" id="upimg" style="width: 300px;height: 40px;border-radius:9px;" class="file_up"></a>
</div> -->
  </form>
        <input type="hidden" id="img">

      <img src="" style="width: 200px;height: 180px; display: none" id="xianshi">
 

    </div>
     <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
 <script src="https://www.layuicdn.com/layui/layui.js"></script>
 <script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>

    <script type="text/javascript">

var avatar="{$member['avatar']}"
var last_id="{$last_id}"

 
 $("body").on("click",".mx_list img",function(e){
 	
 	  ele=$('#imgDiv')
  ele.find('img').attr('src',e.target.src)
  ele.css('display','block')
  ele.on('click',function(){
    ele.css('display','none')

  })
  
 	/*
 	  layer.open({
		  type: 1,
		  title: false,
		  closeBtn: 0,
		  shadeClose: true,
		  skin: 'chatimg',
		  content:`<img  src="`+e.target.src+`">`
		});
	*/	
        //layer.photos({ photos: {"data": [{"src": e.target.src}]} });
    });

      $('#upimg').change(function(){
        var form = new FormData(document.getElementById("form1"));
        form.append('upimg',$('#upimg')[0].files[0]);
        $.ajax({
          url: '/home/feedback/upimg',
          type: 'post',
          data:form,
          dataType: 'json',
          processData:false,
          contentType: false,
          success: function(res) {

             let content={
                      content: '',
                      img:res.img,
                    }
                $.post('/home/account/groupchat',
                   content,
                    function (ret) {
                    	last_id=ret.last_id
                    		if(ret.type =='success'){
                            		var ymd=get_date();
                            			
	                    			var img=res.img
			            	
			            			if(img){ 
			            				var ans=`<div style="width:100%;margin-top: 30px;">
										              <div style="float:right;width:20%;text-align: center;">
										                      <img style="width:50px;height:50px;border-radius:50%;" src="`+avatar+`" alt="">
										             </div>
										
										            <div style="width:50%;float:right;margin-top: 20px;padding:20px;border-radius: 10px;background: #ffd93d;color:#5f4242;position:relative;line-height:30px;">
										                            <div style="width:100%;text-align:center;">
										
										            <img src="`+img+`" style="height:100px;">
										              </div>
										              
										           </div>
										            <div style="clear:both;"></div>
										        </div>`
										        
										        
			   							ans+=`<div style="line-height:30px;color:#ccc;height:30px;text-align:center;width:100%;font-size:12px;">`+ymd +`</div>`
			   								
										$('#table').append(ans)	
			            				
			            				$('#content').val('')
											go_bottom()
										        
										        
			            				
			            			}
                    		}
	                    	
                    	
                    	
                    	
                    },'json'
                );

          }
        })
      })

        $(function () {
            $('.js-bind').click(function () {
                var content = $('#content').val();
                console.log($.trim(content))
                if ($.trim(content) == ""  && !$('#img').val()) {
                    message("至少有内容或者图片才可提交","","error");
                    return;
                }

                        var content = $('#content').val();
        				var img = $('#img').val()
                        $.post(
                            '/home/account/groupchat',
                            {
                              content: content,
                              img:img,
                            },
                            function (ret) {
                            		console.log(ret)
                            		last_id=ret.last_id
                            		if(ret.type =='success'){
                            			var ymd=get_date();
                            			
                            			if(content){
                            				var ans=`<div style="width:100%;margin-top: 30px;">
												              <div style="float:right;width:20%;text-align: center;">
												                      <img style="width:50px;height:50px;border-radius:50%;" src="`+avatar+`" alt="">
												             </div>
												
												            <div style="width:50%;float:right;margin-top: 20px;padding:20px;border-radius: 10px;background: #ffd93d;color:#5f4242;position:relative;line-height:30px;">
												              
												              `+content+`
												           </div>
												
												
												            <div style="clear:both;"></div>
												        </div>`
        
        											ans+=`<div style="line-height:30px;color:#ccc;height:30px;text-align:center;width:100%;font-size:12px;">`+ymd +`</div>`
        
                            				$('#table').append(ans)	
                            				
                            				$('#content').val('')
	                            				go_bottom()
                            			}
                            			

                            			
                            			
                            		}
                              //  message(ret.message,ret.redirect,ret.type);
                                
                            },'json'
                        );


            });
        });
        
        function get_date(){
        	var date = new Date();
			var year = date.getFullYear();
			var month = date.getMonth()+1;
			var day = date.getDate();
			var hour = date.getHours();
			var minute = date.getMinutes(); 
			var second = date.getSeconds();
			return year+'-'+month+'-'+day+' '+hour+':'+minute+':'+second

        }
        
        function go_bottom(){
               setTimeout(
    					function(){
    						
    					$('html,body').animate({
									'scrollTop': 10000
								}, 1000);
    					
						},300
    			)
        }
        go_bottom()
        
        
		function get_message(){
                $.post(
                    '/home/account/get_message',
                    {
                      last_id: last_id,
                    },
                    function (ret) {
                    	ret=JSON.parse(ret)
                    	console.log(ret);
                    		if(ret.type =='success'){
                    			var ymd=get_date();
                    			content=ret.content
                    			if(content){
                    				last_id=ret.last_id
                    				var ans=ret.content
                    				$('#table').append(ans)	
                    			
                        				// go_bottom()
                    			}
                    		
                    		}
                    })
                            
		}
          	
        setInterval(get_message, 3000);
    </script>

</body>
</html>